iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

前端新手的學習筆記系列 第 4

Day04:每天一個小練習 - Bootstrap選單切換

  • 分享至 

  • xImage
  •  

到官方網站複製a連結版本的範例

列表群組 (List group)

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

放入已準備好的3欄空間之內,9欄是之前預先寫好的產品列表

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
    </div>
</div>

調整位置,使之滑動到頂時固定

<div class="list-group sticky-top">

在大區塊放入所需的tab標籤,並移動右側列表排版row以下的內容到tab-pane內

<div class="col-md-9">
        <div class="tab-content">
            <div class="tab-pane"></div>
            <div class="tab-pane"></div>
        </div>

移動後會發現原本內容消失,需要加上active才會出現,此處可以放在任一想當成第一頁的tab-pane上

<div class="tab-pane active">

補上 id ,可以自訂

<div class="tab-pane active" id="page-01">

把對應的控制項放入左側選單的選項內

<a data-toggle="list" href="#page-02" class="list-group-item list-group-item-action">
      選項B
</a>

加上預設的JQ即完成

$(function () {
    $('#myList a:last-child').tab('show')
  })

連結


上一篇
Day03:每天一個小練習 - Bootstrap動態傳入Modal參數02
下一篇
Day05:每天一個小練習 - JS顯示今日時間
系列文
前端新手的學習筆記32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言